<template>
    <el-dialog
        class="dialog"
        :destroy-on-close="true"
        :title="title"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogClose"
    >
        <el-form
            ref="form"
            label-width="auto"
            class="form"
            :model="formData"
            :rules="rules"
        >
            <el-form-item label="梯控guid" prop="door_guid">
                <el-input
                    v-model="formData.door_guid"
                    placeholder="请输入梯控guid"
                    maxlength="20"
                    :disabled="isEdit"
                ></el-input>
            </el-form-item>
            <el-form-item label="梯控名称" prop="door_name">
                <el-input
                    v-model="formData.door_name"
                    placeholder="请输入梯控名称"
                    maxlength="50"
                ></el-input>
            </el-form-item>
            <el-form-item label="梯控分层" prop="tk_layer" >
                 <el-select v-model="formData.tk_layer" placeholder="梯控是否分层控制" :disabled="isEdit">
                        <el-option v-for="item in tkLayerData" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                </el-select>
        </el-form-item>
            <el-form-item label="楼层数量" prop="floor_num" v-if="!isEdit && formData.tk_layer == 1">
                <el-input v-model="formData.floor_num" placeholder="请输入楼层数量" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label="授权清理" prop="door_clear" v-if="!isEdit">
                    <div class="box-row box-center tooltip-el">
                        <el-select v-model="formData.door_clear" placeholder="是否清空已授权数据">
                            <el-option v-for="item in doorClearData" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                        <el-tooltip content="当选择清空时，将清空设备里已下发的所有授权">
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                    </div>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="onDialogClose">取消</el-button>
            <el-button type="primary" @click="onSubmit">确认</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, State } from "vuex-class";
import { isInteger, between } from "@/utils/valid";
import { mixinDialogForm } from "@/mixin/dialog/Form";
@Component({
    name: "equipmentLadderEdit",
    mixins: [mixinDialogForm]
})
export default class equipmentLadderEdit extends Vue {
    @Action("equipmentLadder/add") itemAdd: any;
    @Action("equipmentLadder/edit") itemEdit: any;
    @State((state) => state.sharing.doorClear) doorClearData: any;
    @State((state) => state.sharing.tkLayer) tkLayerData: any;
    editInit(data: any) {
        console.log(data);
        const me = this as any;
        data.tk_layer = data.tk_layer.toString();
        me.formData = Object.assign({}, me.formData, data);
    }

    formData: any = {
        door_name: "",
        floor_num: "",
        door_guid: "",
        door_clear: "",
        tk_layer: ""
    };
    // 表单验证
    rules: any = {
        door_name: [
            {
                required: true,
                message: "请输入梯控名称"
            }
        ],
        build_sn: [
            {
                required: true,
                message: "请选择梯控所在楼栋"
            }
        ],
        door_guid: [
            {
                required: true,
                message: "请输入梯控guid"
            }
        ],
        tk_layer: [
            {
                required: true,
                message: "梯控是否分层"
            }
        ],
        floor_num: [
            {
                required: true,
                message: "请输入楼层数量",
                trigger: "blur"
            },
            {
                minNum: 2,
                maxNum: 60,
                validator: between
            },
            {
                validator: isInteger
            }
        ]
    };
    // 标题
    get title() {
        return (this as any).isEdit ? "编辑梯控" : "新增梯控";
    }
}
</script>
